<template>
  <el-aside class="index-aside" width="200px">
    <div class="index-aside-inner menulist">
      <div v-for="item in menuList" :key="item.roleName" class="menulist-item">
        <div class="menulistImg" v-if="false && 2 == 2">
          <el-image :style='{"padding":"0","boxShadow":"0 0 6px rgba(0,0,0,0)","margin":"0","borderColor":"rgba(0,0,0,0)","borderRadius":"0","borderWidth":"0","width":"100%","borderStyle":"solid","height":"auto"}' v-if="'http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg'" src="http://codegen.caihongy.cn/20201021/cc7d45d9c8164b58b18351764eba9be1.jpg" fit="cover" />
        </div>
		<el-menu :mode="2 == 1? 'horizontal':'vertical'" :unique-opened="false" class="el-menu-demo" default-active="0">
          <el-menu-item index="0" @click="menuHandler('')"><i v-if="true" class="el-icon-menu el-icon-s-home" />首页</el-menu-item>
          <el-submenu :index="1+''">
            <template slot="title">
				<i v-if="true" class="el-icon-menu el-icon-user-solid" />
				<span>个人中心</span>
            </template>
            <el-menu-item :index="1-1" @click="menuHandler('updatePassword')">修改密码</el-menu-item>
            <el-menu-item :index="1-2" @click="menuHandler('center')">个人信息</el-menu-item>
          </el-submenu>
          <el-submenu v-for=" (menu,index) in item.backMenu" :key="menu.menu" :index="index+2+''">
            <template slot="title">
				<i v-if="true" class="el-icon-menu" :class="icons[index]" />
				<span>{{ menu.menu }}</span>
            </template>
            <el-menu-item v-for=" (child,sort) in menu.child" :key="sort" :index="(index+2)+'-'+sort" @click="menuHandler(child.tableName)">{{ child.menu }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
    </div>
  </el-aside>
</template>

<script>
import menu from '@/utils/menu'
export default {
  data() {
    return {
      menuList: [],
      icons: [
        'el-icon-s-cooperation',
        'el-icon-s-order',
        'el-icon-s-platform',
        'el-icon-s-fold',
        'el-icon-s-unfold',
        'el-icon-s-operation',
        'el-icon-s-promotion',
        'el-icon-s-release',
        'el-icon-s-ticket',
        'el-icon-s-management',
        'el-icon-s-open',
        'el-icon-s-shop',
        'el-icon-s-marketing',
        'el-icon-s-flag',
        'el-icon-s-comment',
        'el-icon-s-finance',
        'el-icon-s-claim',
        'el-icon-s-custom',
        'el-icon-s-opportunity',
        'el-icon-s-data',
        'el-icon-s-check',
        'el-icon-s-grid',
        'el-icon-menu',
        'el-icon-chat-dot-square',
        'el-icon-message',
        'el-icon-postcard',
        'el-icon-position',
        'el-icon-microphone',
        'el-icon-close-notification',
        'el-icon-bangzhu',
        'el-icon-time',
        'el-icon-odometer',
        'el-icon-crop',
        'el-icon-aim',
        'el-icon-switch-button',
        'el-icon-full-screen',
        'el-icon-copy-document',
        'el-icon-mic',
        'el-icon-stopwatch',
      ]
    }
  },
  mounted() {
    const menus = menu.list()
    if(menus) {
        this.menuList = menus
    } else {
        let params = {
            page: 1,
            limit: 1,
            sort: 'id',
        }
        this.$http({
            url: "menu/list",
            method: "get",
            params: params
        }).then(({
            data
        }) => {
            if (data && data.code === 0) {
                this.menuList = JSON.parse(data.data.list[0].menujson);
                this.$storage.set("menus", this.menuList);
            }
        })
    }
  },
  created(){
    this.icons.sort(() => {
      return (0.5-Math.random())
    })
  },
  methods: {
    menuHandler(name) {
      let router = this.$router
      name = '/'+name
      router.push(name)
    }
  }
}
</script>
<style lang="scss" scoped>
	.el-container {
		display: block;
	}
  .index-aside {
    position: relative;
    overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	background: #ffffff;
	box-shadow: 2px 0 6px rgba(0, 0, 0, 0.1);
	height: 100vh;

    .menulistImg {
		font-size: 0;
		box-sizing: border-box;

      .el-image {
        margin: 0 auto;
        width: 100px;
        height: 100px;
        border-radius: 100%;
        display: block;
      }
    }

	.index-aside-inner {
      height: 100%;
      margin-right: -17px;
      margin-bottom: -17px;
      overflow: scroll;
      overflow-y: auto;
      padding-top: 58px;
      box-sizing: border-box;

      &:focus {
        outline: none;
      }

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.1);
        border-radius: 3px;
      }

      & /deep/ .el-menu {
        border: 0;
		background-color: transparent;
      }
    }

	.index-aside .index-aside-inner.menulist {
		height: auto !important;
	}
	.menulist-item {
		width: 200px;
		padding: 0;
		margin: 0;
		border-radius: 0;
		border-width: 0 !important;
		border-style: solid !important;
		border-color: rgba(0, 0, 0, 0.3) !important;
		background: #ffffff !important;
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
		box-sizing: border-box;

		.el-menu {
			border-right: none;

			.el-menu-item, .el-submenu__title {
				height: 50px;
				line-height: 50px;
				color: #333;
				font-size: 14px;
				transition: all 0.3s;

				&:hover, &:focus {
					background-color: rgba(52, 152, 219, 0.1);
				}

				i {
					color: #3498db;
					margin-right: 10px;
				}
			}

			.el-menu-item.is-active {
				color: #3498db;
				background-color: rgba(52, 152, 219, 0.1);
				border-left: 3px solid #3498db;
			}

			.el-submenu .el-menu-item {
				height: 45px;
				line-height: 45px;
				padding-left: 50px !important;

				&:hover, &:focus {
					background-color: rgba(52, 152, 219, 0.1);
				}
			}
		}
	}
  }
</style>
<style>
.el-menu--horizontal .el-menu--popup {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 2px 0 0 0;
	border-radius: 4px;
	border-width: 0;
	border-style: solid;
	border-color: rgba(0,0,0,.3);
	background-color: #ffffff;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	min-width: auto;
}

.el-menu--horizontal .el-menu--popup .el-menu-item {
	width: 100%;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	margin: 0;
	color: #333 !important;
	font-size: 14px;
	border-radius: 0;
	border-width: 0;
	border-style: solid;
	border-color: rgba(0, 0, 0, .3);
	background-color: transparent !important;
	box-shadow: none;
	text-align: left;
	min-width: auto;
	transition: all 0.3s;
}

.el-menu--horizontal .el-menu--popup .el-menu-item:hover {
	width: 100%;
	height: 45px;
	line-height: 45px;
	padding: 0 20px;
	margin: 0;
	color: #3498db !important;
	font-size: 14px;
	border-radius: 0;
	border-width: 0;
	border-style: solid;
	border-color: rgba(0, 0, 0, .3);
	background-color: rgba(52, 152, 219, 0.1) !important;
	box-shadow: none;
	text-align: left;
}
</style>
